<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>asd</title>
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png"  href="/cms/i/favicon.png">
    <link rel="apple-touch-icon-precomposed"  href="/cms/i/favicon.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <script src="cms/js/echarts.min.js" src = "/cms/js/echarts.min.js"></script>
    <link rel="stylesheet" href="/cms/css/amazeui.min.css"/>
    <link rel="stylesheet" href="/cms/css/amazeui.datatables.min.css"/>
    <link rel="stylesheet" href="/cms/css/app.css">
    <!--定制css-->
    <link rel="stylesheet" href="/cms/css/MyCss.css">
    <!--jqueryDataTable-->
    <link rel="stylesheet" href="/cms/css/jquery.dataTables.min.css">

</head>
<style>

    .back-dark{
        background-color: #3a4144!important;
    }
    h2,label,select{
        color : whitesmoke;
    }
    .am-selected{
        background-color : whitesmoke;
    }
    input{
        color : antiquewhite!important;
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    h2,laber{
        font-weight: 300;
    }
</style>

<body class="back-dark" >
<script  src = "/cms/js/theme.js"></script>
<div class="row-content am-cf" id="publishBlog">
    <div class="row">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
            <div class="widget am-cf">
                <div class="widget-head am-cf">
                    <h2>博客发布</h2>
                </div>
                <div class="widget-body am-fr">

                    <form class="am-form tpl-form-border-form" action="/cms/publish/saveObj" method="post" enctype="multipart/form-data">
                        <div class="am-form-group">
                            <label for="user-name" class="am-u-sm-12 am-form-label am-text-left">标题 </label>
                            <div class="am-u-sm-12">
                                <input type="text" class="tpl-form-input am-margin-top-xs back-dark" name="title" placeholder="请输入标题文字" >
                            </div>
                        </div>

                        <div class="am-form-group">
                            <label class="am-u-sm-12 am-form-label am-text-left">文章摘要 </label>
                            <div class="am-u-sm-12">
                                <input type="text" name = "summary" class="am-form-field tpl-form-no-bg am-margin-top-xs back-dark"  placeholder="文章摘要"  >
                            </div>
                        </div>

                       <!-- <div class="am-form-group">
                            <label  class="am-u-sm-12 am-form-label am-text-left">作者<span class="tpl-form-line-small-title">Author</span></label>
                            <div class="am-u-sm-12  am-margin-top-xs">
                                <select data-am-selected="{searchBox: 1}" style="display: none;">
                                    <option value="a">-The.CC</option>
                                    <option value="b">夕风色</option>
                                    <option value="o">Orange</option>
                                </select>
                            </div>
                        </div>-->
<!--
                        <div class="am-form-group">
                            <label class="am-u-sm-12 am-form-label  am-text-left">SEO关键字 <span class="tpl-form-line-small-title">SEO</span></label>
                            <div class="am-u-sm-12">
                                <input type="text" class="am-margin-top-xs" placeholder="输入SEO关键字">
                            </div>
                        </div>-->

                        <div class="am-form-group">
                            <label for="user-weibo" class="am-u-sm-12 am-form-label  am-text-left">封面图</label>
                            <div class="am-u-sm-12 " style="margin: 30px 0">
                                <div class="am-form-group am-form-file">
                                    <div class="tpl-form-file-img">
                                        <img id="xmTanImg" alt="" style="width: 348px"/>
                                    </div>
                                    <button type="button" class="am-btn am-btn-danger am-btn-sm ">
                                        <i class="am-icon-cloud-upload"></i> 添加封面图片</button>
                                    <input  type="file"  name = "fileImg" id="xdaTanFileImg" onchange="xmTanUploadImg(this)" />
                                </div>
                            </div>
                        </div>

                        <div class="am-form-group">
                            <label  class="am-u-sm-12 am-form-label  am-text-left">添加分类</label>
                                <select data-am-selected class="pulishBlogSelect" id="firstCat" onchange="getCat('1')">

                                </select>
                            <select data-am-selected class="pulishBlogSelect" id="twoCat" name = "categoryId">

                            </select>
                        </div>

                        <div class="am-form-group">
                            <label class="am-u-sm-12 am-form-label am-text-left">今日天气</label>
                            <div class="am-u-sm-4" style="float: none">
                                    <select data-am-selected name = "weather" style="color:#a36868">
                                        <option value="#icon-sun" selected>晴</option>
                                        <option value="#icon-icon-test" >云</option>
                                        <option value="#icon-icon-test1">多云</option>
                                        <option value="#icon-icon-test2">中雨</option>
                                        <option value="#icon-icon-test3">小雨</option>
                                        <option value="#icon-icon-test4">大雨</option>
                                        <option value="#icon-icon-test5">雷阵雨</option>
                                        <option value="#icon-icon-test6">雨加冰雹</option>
                                        <option value="#icon-icon-test7">特大暴雨</option>
                                        <option value="#icon-icon-test8">暴雨</option>
                                        <option value="#icon-icon-test9">小雪</option>
                                        <option value="#icon-icon-test10">中雪</option>
                                        <option value="#icon-icon-test11">雨夹雪</option>
                                        <option value="#icon-icon-test12">大雪</option>
                                        <option value="#icon-icon-test13">浮沉</option>
                                        <option value="#icon-icon-test14">沙尘</option>
                                        <option value="#icon-icon-test15">大暴雪</option>
                                        <option value="#icon-icon-test16">雾</option>
                                        <option value="#icon-icon-test17">雾霾</option>
                                        <option value="#icon-icon-test18">飓风</option>
                                        <option value="#icon-icon-test19">大风</option>
                                        <option value="#icon-icon-test20">龙卷风</option>
                                        <option value="#icon-icon-test21">风</option>
                                        <option value="#icon-icon-test22">未知</option>
                                    </select>
                            </div>
                        </div>

                        <!--<div class="am-form-group">
                            <label for="user-intro" class="am-u-sm-12 am-form-label  am-text-left">隐藏文章</label>
                            <div class="am-u-sm-12">
                                <div class="tpl-switch">
                                    <input type="checkbox" class="ios-switch bigswitch tpl-switch-btn am-margin-top-xs" checked="">
                                    <div class="tpl-switch-btn-view">
                                        <div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>-->

                        <div class="am-form-group" >
                            <label class="am-u-sm-12 am-form-label am-text-left">文章备注 </label>
                            <div class="am-u-sm-12">
                                <input type="text" name = "remarks" class="am-form-field tpl-form-no-bg am-margin-top-xs back-dark" placeholder="备注"  >
                            </div>
                        </div>

                        <div class="am-form-group">
                            <label  class="am-u-sm-12 am-form-label  am-text-left">文章内容</label>
                            <br/>
                            <!-- 百度富文本 -->
                            <script id="editor" type="text/plain" style="width:1170px;height:500px;color:black;margin:20px;float:left" name = "text" ></script>
                        </div>

                        <br/>

                        <div class="am-form-group" >
                            <div class="am-u-sm-12 am-u-sm-push-12">
                                <button type="submit" class="am-btn am-btn-primary tpl-btn-bg-color-success " >提交</button>
                            </div>
                        </div>

                    </form>

                </div>
            </div>
        </div>
    </div>

</div>
<script src = "/cms/js/jquery.min.js"></script>
<script  src="/cms/js/amazeui.min.js"></script>
<script  src="/cms/js/amazeui.datatables.min.js"></script>
<script  src="/cms/js/dataTables.responsive.min.js"></script>
<script  src="/cms/js/app.js"></script>
<script src="/cms/js/jquery.dataTables.min.js"></script>
<!--<script  th:src="@{/cms/kindEdit/kindeditor-all.js}"></script>
<script  th:src="@{/cms/kindEdit/lang/zh-CN.js}"></script>-->
<!--百度富文本编辑器-->
<script type="text/javascript" charset="utf-8" src="/cms/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/cms/ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="/cms/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="application/javascript">
    /*初始化一级分类*/
    getCat();
/*初始化百度富文本*/
    var ue = UE.getEditor('editor');
    /*上传头像之后在列表中回显*/
    //判断浏览器是否支持FileReader接口
    if (typeof FileReader == 'undefined') {
        document.getElementById("xmTanDiv").InnerHTML = "<h1>当前浏览器不支持FileReader接口</h1>";
        //使选择控件不可操作
        document.getElementById("xdaTanFileImg").setAttribute("disabled", "disabled");
    }

    //选择图片，马上预览
    function xmTanUploadImg(obj) {
        var file = obj.files[0];

        console.log(obj);console.log(file);
        console.log("file.size = " + file.size);  //file.size 单位为byte

        var reader = new FileReader();

        //读取文件过程方法
        reader.onloadstart = function (e) {
            console.log("开始读取....");
        }
        reader.onprogress = function (e) {
            console.log("正在读取中....");
        }
        reader.onabort = function (e) {
            console.log("中断读取....");
        }
        reader.onerror = function (e) {
            console.log("读取异常....");
        }
        reader.onload = function (e) {
            console.log("成功读取....");

            var img = document.getElementById("xmTanImg");
            img.src = e.target.result;
            //或者 img.src = this.result;  //e.target == this
        }

        reader.readAsDataURL(file)
    }

   function getCat(type){
        var pid ;
        var selectId ;
        if(type == 1){
             pid = $("#firstCat").val()
            selectId = "twoCat";
        }else{
             pid = 0;
            selectId = "firstCat";
        }
       $.post("/cms/publish/getArticleCat",{"pid":pid},function(data){
                if(data.ret == 200){
                    var cats = data.data;
                    var html = ""
                    for(var index in cats ){
                        html +="<option value="+cats[index].id+">"+cats[index].title+"</option>"
                    }
                    $("#"+selectId).html(html);
                }
                //如果是第一遍加载再调用一次
           if(type!=1){
               getCat(1);
           }
       });
   }
</script>

</body>


</html>


